/** 
* @description 轮播控件 ，适用于类似 banner 这类需要轮循展示显示
* */
Rsd.define('Rsd.control.Carousel', {
    extend: 'Rsd.control.Component',
    requires: [ 
         'Rsd.form.Image'
    ],
    xtype: 'carousel',
    width:'100%',
    height:500,
    style:{opacity:1},
    //cls:'',
    ctrlTagName: 'div',
    listeners: {
        "touchstart": {
            element: 'ctrl',
            fn: function (sender, event) {
                this.startTime = new Date().getTime();
                this.startX = event.touches[0].pageX;
                this.startY = event.touches[0].pageY;
            }

        },
        "touchmove": {
            element: 'ctrl',
            fn: function (sender, event) {
                event.preventDefault();
                //console.log("touchmove:" + event.touches[0].clientX+ ',' + event.touches[0].clientY);
            }
        },
        "touchend": {
            element: 'ctrl',
            fn: function (sender, event) {

                var endx = event.changedTouches[0].pageX;
                var endy = event.changedTouches[0].pageY;
                var endtime = new Date().getTime();
                var touch = this.getTouched(this.startX, this.startY, endx, endy,this.startTime,endtime);
                if(touch.speed < 500)
                {
                    touch.speed = 500;
                }
                touch.speed=parseInt(touch.speed/500) * 500;
                switch (touch.direction) {
                    case 'none':
                        //console.log("未滑动！");
                        break;
                    case 'up':
                        this.next({top:'-100%',left:null},{top:'200%',left:null},touch.speed);

                        break;
                    case 'down':
                        this.previous({top:'200%',left:null},{top:'-100%',left:null},touch.speed);
                        break;
                    case 'left':
                        this.next({top:null,left:'-100%'},{top:null,left:'200%'},touch.speed);
                        break;
                    case 'right':
                        this.previous({top:null,left:'200%'},{top:null,left:'-100%'},touch.speed);

                        break;
                    default:
                }
            }
        }
    },
    label:{
        height:40,
        visible:true,
        space:0,
        cls:'x-label'
        //content:'this is image viewer'
    },
     /**
     * 生成的动画帧集合,{element:dom,}
     */
    frames:[],
    /**
     * 子元素集合
     */
    items:[],
    /**
     * 子元素控件类型，默认：image
     */
    itemXtype:'image',
    /**
     * @description 数据源,参考itemXtype指向的对象配置项,额外增加link属性{url:'',target:'_self'}，用于地址跳转
     * @example [link:{url:'',target:'self'}]
     * */
    dataSource: [],
     
    /**
     * 当前图片序号
     */
    currentIndex:0,
    
    /**
     * 每帧停留时长，单位毫秒
     */
    duration:5000,
    /*
    * */
    constructor: function Carousel(config) {
        config = config || {};
        this.apply(config);
        if(config.items && config.items.length > 0)
        {
            console.error('禁止使用items,请使用dataSource代替',config);  
        }
    },
   
    /**  
     
     * */ 
    loadData: function loadData(data) {

        var me = this;
        me.currentIndex=-1; 
        me.frames=[];
        me.items=[];
        me.dataSource = data || me.dataSource;
        
        me.ctrl.element.style.overflow='hidden';

        if(Rsd.isArray(this.dataSource))
        {
            this.removeAll();

            for(var i in me.dataSource)
            {
                if(Rsd.isString(this.dataSource[i]))
                {
                    me.dataSource[i] = {src:me.dataSource[i]};
                }
                var _item = me.dataSource[i];
                _item.parent = me;
                var _frame = me.initFrame(_item);
                //me.log(_frame);
                me.frames.push(_frame);
                me.ctrl.element.appendChild(_frame.element);
            }
        }
       //console.log(me.frames);
        var _speed = 50;

        setTimeout(function(){
            me.select(0,{top:null,left:'-100%'},{top:null,left:'200%'},_speed);
        },0);
       
        setTimeout(function(){
            //setInterval
            if(me.interval)
            {
                clearInterval(me.interval);
            } 
          
            me.interval = setInterval(function () {
               
                me.next({top:null,left:'-100%'},{top:null,left:'200%'},2000);

            },me.duration||5000);

         },_speed);
        
        return me;
    },
    /**
     * 
     * @param {*} config 
     */
    initFrame:function initFrame(config) {

        var frame = config;
        var item = Rsd.widget(this.itemXtype,config);
        this.items.push(item);

        if(!frame.element)
        {
            frame.element = document.createElement('div');
            Rsd.setElStyle(frame.element,{
                width:'100%',
                height:'100%',
                position:'absolute',
                opacity:0,
                display:'none', 
                maxWidth:'100%', 
                maxHeight:'100%'
            },this.sizeUnit);
        }

        if(frame.link)
        {
            frame.element.onclick = function() {
                if(Rsd.isString(frame.link))
                {
                    window.open(frame.link,'_self');
                }
                if(Rsd.isObject(frame.link))
                {
                    window.open(frame.link.url,frame.link.target||'_self');
                }
            }
        }
       
        if(frame.cls)
        {
            frame.element.classList.add(frame.cls);
        }
        if(this.key)
        {
            frame.element.setAttribute('id',this.key);
        }
 
        item.renderTo(frame.element);
        item.doLayout(); 
        if(item.loadData)
        {
            item.loadData();
        }
        //item.show();//control 控件不需要show
        return frame;
    },
    /**
     * 
     */
    removeAll:function removeAll()
    { 
           if(this.ctrl.element)
           {
              this.ctrl.element.innerHTML = "";
           }
             
           this.frames=[];
    },
    /**
     *   @description 将控件以动画的形式将对象显示出来
     *   @param {int} index
     *   @param {stting|Object} outAnimate 退出图片动画目标样式：fadeIn,slideDown,{top,30,left:100,backgroudColor:'red'}
     *   @param {stting|Object} inAnimate 进入图片动画起始样式：fadeIn,slideDown,{top,30,left:100,backgroudColor:'red'}
     *   @param {int} speed 速度
     * */
    select:function(index,outAnimate,inAnimate,speed)
    {   
        var me = this;
        if ( !Rsd.isArray(me.frames) || me.frames.length == 0) {
            
            return;
        }
        if(index == me.currentIndex)
        {
            return;
        }
        //离开的目标样式
        var _outAnimate = Rsd.apply({opacity:0,left:'-100%'},outAnimate||{});
        //进入的起始位置样式
        var _inAnimate = Rsd.apply({display:'flex',opacity:0,left:'200%'},inAnimate||{});
        var _speed = speed||200;
        if(_speed < 200)
        {
            _speed = 200;
        }
   
        me.dom.style.opacity = 1;
        
        this.block(function () {
            
            if(me.currentIndex == 0 || me.currentIndex > 0)
            { 
                //要离开的图片
                var _out_img = me.frames[me.currentIndex].element || me.frames[me.currentIndex]; 
                //out image 离开图片动画
                setTimeout(function () {
                    //console.log('离开图片动画',_out_img, _outAnimate);
                    try {
                        
                        //设置动画 参数
                        _out_img.style.transitionDuration = (_speed / 1000.00) + "s";
                        _out_img.style.transitionProperty = "all"; 

                        //离开的最终样式
                        me.setElStyle(_out_img, _outAnimate);

                    } catch (e) {

                    } 
                        
                }, 0);

                //离开动画执行结束后 => 重置图片状态
                setTimeout(function () {
                    try {
                        _out_img.style.transition = null;
                        _out_img.style.display = 'none';
                    } catch (e) {

                    }

                }, _speed + 10);
            }
          
            //初始化 进度图片状态
            var i = index< 0 ? 0 : index;
            i = i % me.frames.length;
            //当前图片序号
            me.currentIndex = i;  
            var _img_in = me.frames[me.currentIndex].element || me.frames[me.currentIndex]; 
            //设置 进入图片 起始状态 
            me.setElStyle(_img_in, _inAnimate);
             
            //in image 进入图片动画
            setTimeout(function () { 
               //console.log('进入图片动画');
                try { 
                     //设置动画效果
                     _img_in.style.transitionDuration = (_speed / 1000.00) + "s";
                    _img_in.style.transitionProperty = "all";
                    //_img_in.style.transitionTimingFunction= _fun;
                    //_img_in.style.transitionDelay=(0/1000.00) + "s"

                    //进入图片 目标位置
                    if (_img_in instanceof HTMLImageElement) {
                        
                        me.setElStyle(_img_in, {opacity: 1, left: null, right: null, top: null, bottom: null});
                    }
                    else {
                        me.setElStyle(_img_in, {opacity: 1, left: 0, right: 0, top: 0, bottom: 0});
                    }
                   
                } catch (e) {
                  
                }

            }, 10); 

        }, _speed);   
 
        return this;
    },
     
    /**
     * 
     * @param {*} outAnimate 离开动画
     * @param {*} inAnimate 进入动画
     * @param {*} speed 速度
     * @returns 
     */
    next:function next(outAnimate,inAnimate,speed) {

        var _speed = speed||1000;
        this.select(this.currentIndex+1,outAnimate,inAnimate,_speed);
        return this;
    },

    /**
     * 
     * @param {*} outAnimate 离开动画
     * @param {*} inAnimate 进入动画
     * @param {*} speed 速度
     * @returns 
     */
    previous:function previous(outAnimate,inAnimate,speed)
    {
        var _speed = speed||1000;
        this.select(this.currentIndex-1,outAnimate||{left:'200%'},inAnimate||{left:'-100%'},_speed);
        return this;
    }

});